<template>
	<view class="psh">
		<u-navbar :is-back="false" title="购物车" :background="{ background: '#a0cfff' }" title-color="#FFFFFF"></u-navbar>
		<view class="pshC u-p-20">
			<scroll-view :scroll-y="true" v-if="shopList.length > 0">
				<view class="pshSin u-p-20 u-m-b-25" v-for="(item, index) in shopList" :key="index">
					<view class="top">
						<view class="left">
							<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
							<view class="store">{{item.user.username}}</view>
							<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
						</view>
						<view class="right" v-if="item.shop.shopSold">已下架</view>
						<view class="right" v-else-if="item.shop.deleteType">商品修改或删除</view>
						<view class="right" v-else-if="item.shop.shopNum == item.shop.shopBuy">商品已买完</view>
						<view class="right" v-else>商品出售中</view>
					</view>
					<view class="item u-m-t-15" @click="singShop(item.shop,item.shopId)">
						<view class="left">
							<image :src="item.shop.shopUrl" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="title u-line-2">{{ item.shop.title }}</view>
							<view class="type">{{ item.lity.listType }}成新</view>
							<view class="delivery-time u-m-t-30">创建时间： {{ item.creatTime }}</view>
						</view>
						<view class="right">
							<view class="price">
								￥{{ item.shop.price }}
								<!-- <text class="decimal">.{{ priceDecimal(item.price) }}</text> -->
							</view>
							<view class="number">x1</view>
						</view>
					</view>
					<view class="bottom">
						<u-button class="u-m-l-30" type="error" shape="circle" size="mini" plain
						   @click="deleteClick(item.shop.id)">取消收藏</u-button>
					</view>
				</view>
			</scroll-view>
			
			<view v-else>
				<u-empty mode="data" color="#a0cfff" icon-color="#a0cfff"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import helper from '../../common/helper.js'
	import time from '../../common/time.js'
	export default {
		data() {
			return {
				shopList: []
			}
		},
		created() {
			this.getShop()
		},
		methods: {
			singShop(item,index) {
				if(item.deleteType == true){
					uni.showToast({
						title: "商品修改或删除",
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(item.shopNum == item.shopBuy){
					uni.showToast({
						title: "商品已买完",
						icon: 'none',
						duration: 2000
					})
					return
				}
				console.log(item,index)
				uni.navigateTo({
					url: '../../pages/shopes/shopXQ?id=' + index
				})
			},
			//获取商品
			getShop() {
				let that = this
				let user = uni.getStorageSync("user")
				let data = {
					userId: user.id
				}
				that.postRequest(helper.getAllCollect, data).then(res => {
					if (res.data.flag == "200") {
						let serve = res.data
						that.shopList = []
						serve.collectList.forEach((item, index) => {
							if (item.shop.shopUrl.indexOf("<<tupian>>") > 0) {
								item.shop.shopUrl = item.shop.shopUrl.split("<<tupian>>")[0]
								// console.log(index)
							}
							item.creatTime = that.formatDateTime(item.creatTime)
							item.upadteTime = that.formatDateTime(item.upadteTime)
							that.shopList.push(item)
						})
					}
				})
			},
			deleteClick(index){
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否取消收藏该商品？',
					success: function (res) {
						if (res.confirm) {
							let data = {
								id: index,
							}
							that.postRequest(helper.deleteDeleteType, data).then(res => {
								if (res.data.flag == "200") {
									uni.showToast({
										title: '删除成功',
										icon: 'none',
										duration: 2000
									})
									that.getShop()
								} else {
									uni.showToast({
										title: '删除失败',
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '删除失败',
								icon: 'none',
								duration: 2000
							})
						}
					}
				});
			}
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.psh {
		.pshC {
			.pshSin {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				// box-shadow:0px 0px 6px #00000030;
				box-shadow: 5rpx 5rpx -5rpx #FFFFFF;

				.top {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.store {
							margin: 0 10rpx;
							font-size: 32rpx;
							font-weight: bold;
						}
					}

					.right {
						color: $u-type-warning-dark;
					}
				}

				.item {
					display: flex;

					// margin: 20rpx 0 0;
					.left {
						margin-right: 20rpx;

						image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 10rpx;
						}
					}

					.content {
						.title {
							font-size: 28rpx;
							line-height: 50rpx;
						}

						.type {
							margin: 10rpx 0;
							font-size: 24rpx;
							color: $u-tips-color;
						}

						.delivery-time {
							color: #e5d001;
							font-size: 24rpx;
						}
					}

					.right {
						margin-left: 10rpx;
						padding-top: 20rpx;
						text-align: right;

						.decimal {
							font-size: 24rpx;
							margin-top: 4rpx;
						}

						.number {
							color: $u-tips-color;
							font-size: 24rpx;
						}
					}
				}

				.bottom {
					display: flex;
					margin-top: 40rpx;
					padding: 0 10rpx;
					justify-content: flex-end;
					align-items: center;
					
					.titleTy{
						font-size: 24rpx;
						color: $u-tips-color;
					}
				}

			}
		}
	}
</style>
